<template>
  <div class="evt">
    <div class="baoguo">
      <div style="margin: 20px" />
      <el-form
        label-position="labelPosition"
        label-width="auto"
        :model="validate"
        style="max-width: 600px"
      >
        <el-form-item label="用户名">
          <el-input v-model="validate.account" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="validate.password" />
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="handleLogin"> 登录 </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { GuanLi } from "@/api/GuanLi";
import { loginApi } from "../api/GuanLi";
// import axios from "axios";
const validate = reactive({
  account: "admin", // 将 account 改为 adminname
  password: "123456", // 保持 password 不变
});
const $router = useRouter();
const handleLogin = () => {
  loginApi({
    adminname: validate.account,
    password: validate.password,
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "登录成功",
        type: "success",
        duration: 1500,
      });
      // 1、存用户名
      localStorage.setItem("adminname", validate.adminname);
      // 2、存token
      localStorage.setItem("token", res.data.data.token);
      $router.push("/Home");
    } else if (res.data.code === "10003") {
      ElMessage.error("密码错误");
    } else if (res.data.code === "10005") {
      ElMessage.error("用户名错误");
    } else {
      alert("获取不到");
    }
  });
};
// 定义响应式数据对象：
// 使用 reactive 方法创建了一个名为 validate 的响应式对象，其中包含了用户登录时需要输入的账号和密码，默认值分别为 admin 和 123456。
// 获取路由实例：
// 使用 const $router = useRouter(); 获取当前的路由实例，后续用于页面跳转操作。
// 定义处理登录的函数 handleLogin：
// 当用户点击登录按钮时触发该函数，在函数内部调用 loginApi 方法发送登录请求，传递用户输入的账号和密码。
// 根据接口返回的数据进行不同的处理：若登录成功则显示成功消息并将用户名和 token 存储到本地，然后跳转到 "/Home" 页面；若密码错误则显示密码错误消息；若用户名错误则显示用户名错误消息；其他情况弹出"获取不到"提示。引入相关模块：

// import { reactive } from "vue";：引入 Vue 3 中用于创建响应式对象的 reactive 方法。
// import { useRouter } from "vue-router";：引入 Vue Router 中的 useRouter 方法，用于获取路由实例。
// import { GuanLi } from "@/api/GuanLi"; 和 import { loginApi } from "../api/GuanLi";：引入了两个 API 相关的模块。
// 定义响应式数据对象：

// 使用 reactive 方法创建了一个名为 validate 的响应式对象，其中包含了用户登录时需要输入的账号和密码，默认值分别为 admin 和 123456。
// 获取路由实例：

// 使用 const $router = useRouter(); 获取当前的路由实例，后续用于页面跳转操作。
// 定义处理登录的函数 handleLogin：

// 当用户点击登录按钮时触发该函数，在函数内部调用 loginApi 方法发送登录请求，传递用户输入的账号和密码。
// 根据接口返回的数据进行不同的处理：若登录成功则显示成功消息并将用户名和 token 存储到本地，然后跳转到 "/Home" 页面；若密码错误则显示密码错误消息；若用户名错误则显示用户名错误消息；其他情况弹出"获取不到"提示。

// const handleLogin = () => {
//   axios({
//     method: "post",
//     url: "http://121.89.205.189:3000/admin/admin/login",
//     data: {
//       adminname: validate.account, // 使用 adminname 作为参数
//       password: validate.password, // 保持 password 不变
//     },
//   }).then((res) => {
//     if (res.data.code === "200") {
//       localStorage.setItem("token", res.data.token);
//       alert("登录成功");
//       $router.push("/Home");
//     } else if (res.data.code === "10003") {
//       alert("密码错误");
//     } else if (res.data.code === "10005") {
//       alert("未注册");
//     }
//   });
// };
</script>

<style scoped lang="scss">
.evt {
  width: 100%;
  height: 100%;
  background-image: url("../../public/imgs/微信图片_20240325202958.png");
  overflow: hidden;
  position: relative;
}
.baoguo {
  width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.el-button {
  margin-left: 285px;
}

</style>
